import React, { Fragment } from 'react'
import { StyleSheet, ScrollView, View, Text } from 'react-native'
import BasePage from 'src/pageP/base/base-page/index'
import CustomFlatList from 'src/components/custom-flat-list/index'
import RefreshState from 'src/components/custom-flat-list/RefreshState'
import { ScaleS, ScaleT, ONE_PIXEL } from 'src/utils/ScreenUtil'
import { myOrderList } from 'src/utils/RequestAPI'
import { connect } from 'react-redux'
// 发送行为
const mapDispatchToProps = dispatch => ({
})

@connect(
  ({ userinfo, BMineCenterStore }) => ({
    userinfo,
    ...BMineCenterStore
  }),
  mapDispatchToProps
)
class BMemberOrder extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      header: {},
      dataSource: [],
      pullUp: true
    }
  }

  componentDidMount () {
    this._onHeaderRefresh()
  }

  myOrderListRequest = () => {
    this.flatListRef.beginHeaderRefresh(RefreshState.Idle)
    myOrderList({}).then(res => {
      this.setState({
        dataSource: res.data || []
      })
    }).finally(() => {
      this.flatListRef.endRefreshing(RefreshState.NoMoreData)
    })
  }

  childRender () {
    const { dataSource } = this.state
    return (
      <Fragment>
        <View style={styles.titleWrap}>
          <Text style={styles.title}>订单记录</Text>
          <Text style={styles.titleNum}>{dataSource.length}</Text>
        </View>
        <CustomFlatList
          ref={this._customFlatListRef}
          style={styles.flatList}
          data={dataSource}
          pullDown={true}
          pullUp={false}
          ListEmptyComponent={this._listEmptyComponent()}
          onHeaderRefresh={this._onHeaderRefresh}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
        />
      </Fragment>
    )
  }

  _customFlatListRef = (ref) => {
    this.flatListRef = ref
  }

  _listEmptyComponent = () => {
    return null
  }

  _onHeaderRefresh = () => {
    this.myOrderListRequest()
  }

  _keyExtractor = (item, index) => item.id.toString()

  _renderItem = ({ item, index }) => {
    return <View style={[styles.cellContainer, index === 0 && styles.cellTopBorder]}>
      <Text style={styles.name}>{item.skuName}</Text>
      <View style={styles.secondWrap}>
        <Text style={styles.time}>{item.utcCreated}</Text>
        <Text style={styles.price}>{`${item.amount}元`}</Text>
      </View>
    </View>
  }

  bottomBtnClick = () => {
    this.props.navigation.navigate('BMemberList')
  }
}

export default BMemberOrder

const styles = StyleSheet.create({
  titleWrap: {
    marginLeft: ScaleS(20),
    marginTop: ScaleS(15),
    marginBottom: ScaleS(25),
    height: ScaleS(35),
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  title: {
    fontSize: ScaleT(25),
    fontWeight: '600',
    color: '#444444'
  },
  titleNum: {
    marginLeft: ScaleS(5),
    marginTop: ScaleS(5),
    fontSize: ScaleT(16),
    fontWeight: 'bold',
    color: '#444444'
  },
  flatList: {
    flex: 1
  },
  cellContainer: {
    borderColor: 'rgba(120, 120, 120,0.2)',
    borderStyle: 'solid',
    borderBottomWidth: ONE_PIXEL,
    paddingHorizontal: ScaleS(20),
    paddingVertical: ScaleS(19),
    justifyContent: 'space-between'
  },
  cellTopBorder: {
    borderTopWidth: ONE_PIXEL
  },
  name: {
    fontSize: ScaleT(16),
    fontWeight: '600',
    lineHeight: ScaleS(26),
    color: '#444444'
  },
  secondWrap: {
    height: ScaleS(24),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  time: {
    fontSize: ScaleT(14),
    fontWeight: 'bold',
    color: '#999999'
  },
  price: {
    fontSize: ScaleT(16),
    fontWeight: 'bold',
    color: '#30C098'
  }
})
